<template>
  <view class="tab-bar" @touchmove.stop.prevent="()=>{}">
    <view class="bar-view center">
      <view class="bar-item" :class="{current:index === tabIndex}" v-for="(item ,index) in props.tabs" :key="item.id" @click="changeTab(index)">{{item.name}}</view>
    </view>
  </view>
</template>

<script setup lang="ts">
  const props = defineProps({
    tabs:{
      type:Array,
      default: () => [
        {
          id:1,
          name:"课程"
        },
        {
          id:2,
          name:"文章"
        },
        {
          id:3,
          name:"问答"
        }
      ]
    },
    tabIndex:{
      type:Number,
      default:0
    }
  })
  const emit = defineEmits(['changeTab'])
  const changeTab = (index) =>{
    if(index !== props.value){
      emit('changeTab',index)
    }
  }
</script>

<style scoped lang="scss">
  .tab-bar{
    width: 100%;
    height: 80rpx;
    background-color: #ffffff;
    border-bottom: 1px solid #efeff4;
    .bar-view{
      width: 100%;
      text-align: center;
      .bar-item{
        flex: 1;
        font-size: 30rpx;
        line-height: 80rpx;
        position: relative;
        &:after{
          position: absolute;
          content: '';
          width: 0;
          height: 0;
          border-bottom: 6rpx solid $mxg-text-color-blue;
          border-radius: 30rpx;
          left: 50%;
          bottom:5rpx;
          transform: translateX(-50%);
          transition: .3s;
        }
      }
      .current{
        color: $mxg-text-color-blue;
        &:after{
          width: 60rpx;
        }
      }
      
    }
  }
</style>